<template>
	<div class="container">
		<ul class="title">
			<li>姓名</li>
			<li>手机号</li>
			<li>等级</li>
			<li>业务</li>
		</ul>
		<hr style="height: .3rem;" />
		<ul class="content">
			<li>
				<span>王小二</span>
				<span>17703840845</span>
				<span>区域总代理</span>
				<span>199009</span>
			</li>
			<li>
				<span>王小二</span>
				<span>17703840845</span>
				<span>区域总代理</span>
				<span>199009</span>
			</li>
			<li>
				<span>王小二</span>
				<span>17703840845</span>
				<span>区域总代理</span>
				<span>199009</span>
			</li>
			<li>
				<span>王小二</span>
				<span>17703840845</span>
				<span>区域总代理</span>
				<span>199009</span>
			</li>
			<li>
				<span>王小二</span>
				<span>17703840845</span>
				<span>区域总代理</span>
				<span>199009</span>
			</li>
			<li>
				<span>王小二</span>
				<span>17703840845</span>
				<span>区域总代理</span>
				<span>199009</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		
	}
</script>

<style scoped="scoped" lang="less">
.container {
	.title {
		display: flex;
		background: #fff;
		justify-content: space-between;
		
		li {
			width: 25%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: .3rem 0;
			color: #9B9B9B;
		}
	}
	
	.content {
		li {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: .3rem;
			border-bottom: .01rem solid #F6F6F6;
			background: #fff;
			
			span:nth-child(3){
				background: #218BFB;
				color: #fff;
				font-size: .24rem;
				padding: .04rem .1rem;
				border-radius: .08rem;
			}
			
		}
	}
}
</style>
